import React, { Component } from 'react'
import "./TabBar.scss"
export default class TabBar extends Component {
  state = {
    active: "index"
  }

  /* 用到的各种方法 */
  //1.点击TabBar的各项,切换路由和颜色
  handleTabBar = (activetab) => {
    this.props.history.push(activetab)
    let tabs = {
      index: true,
      cart: true,
      search: true,
      my: true,
    }
    if (tabs[activetab]) {
      this.setState({
        active: activetab
      })
    }
  }
  //2.配合监听过滤路径
  filterroutes = (urltab) => {
    let activetab = {
      index: true,
      search: true,
      cart: true,
      my: true,
      address: true,
      checkout: true,
      editorAddress: true,
      like: true,
      login: true,
      order: true,
      orderDetail: true,
      payment: true,
      set: true,
      setAvatar: true,
      setMobile: true,
      setPassword: true,
      setUserName: true,
      topic: true,

    }
    if (activetab[urltab]) {
      return urltab
    } else {
      return 'index'
    }
    // }
  }

  render() {
    return (
      /* tabBar开始 */
      <div className="TabBar">
        {/* 页面主要部分开始 */}
        <div className="TabBarContent">
          {this.props.children}
        </div>
        {/* 页面主要部分结束 */}
        {/* tabBar开始 */}
        <div className="TabBarItems">
          <div className="TabBarItem" onClick={this.handleTabBar.bind(this, "index")}>
            <i className={this.state.active === "index" ? "iconfont icon-shouye active" : "iconfont icon-shouye"}></i>
            <span className={this.state.active === "index" ? "active" : ""}>首页</span>
          </div>
          <div className="TabBarItem" onClick={this.handleTabBar.bind(this, "search")}>
            <i className={this.state.active === "search" ? "iconfont icon-fangdajing active" : "iconfont icon-fangdajing"}></i>
            <span className={this.state.active === "search" ? "active" : ""}>发现</span>
          </div>
          <div className="TabBarItem" onClick={this.handleTabBar.bind(this, "cart")}>
            <i className={this.state.active === "cart" ? "iconfont icon-gouwuche active" : "iconfont icon-gouwuche"}></i>
            <span className={this.state.active === "cart" ? "active" : ""}>购物车</span>
          </div>
          <div className="TabBarItem" onClick={this.handleTabBar.bind(this, "my")}>
            <i className={this.state.active === "my" ? "iconfont icon-yonghu active" : "iconfont icon-yonghu"}></i>
            <span className={this.state.active === "my" ? "active" : ""}>我的</span>
          </div>
        </div>
        {/* tabBar结束 */}
      </div>
      /* tabBar结束 */
    )
  }

  async componentDidMount() {
    let active = this.props.match.path.split('/')[1]
    active = this.filterroutes(active);
    let tabs = {
      index: true,
      cart: true,
      search: true,
      my: true,
    }
    if (tabs[active]) {
      await this.setState((prevState) => {
        return {
          active,
        };
      });
    }
    let that = this;
    window.addEventListener("hashchange", function () {
      let active = that.props.match.path.split('/')[1]
      active = that.filterroutes(active);
      let tabs = {
        index: true,
        cart: true,
        search: true,
        my: true,
      }
      if (tabs[active]) {
        if (that.state.active !== active) {
          that.setState((prevState) => {
            return {
              active,
            };
          });
        }
      }
    })
  }

  componentWillUnmount() {
    let that = this
    window.removeEventListener("hashchange", function () { })
  }
}
